<template>
	<view>
		<!-- <view :class="isOpenModal?'fixed':''"> -->
		<view>
			<view>
				<view class="cu-form-group">
					<view class="title">入库单号</view>
					<input placeholder="" :disabled="true" v-model="bill" name="input" @confirm="onConfirmMaterial" />
				</view>
				<view class="cu-form-group">
					<view class="title">储位</view>
					<input placeholder="" :disabled="true" v-model="storeNum" name="input" @confirm="onConfirmMaterial" />
				</view>
				<view class="cu-form-group">
					<view class="title">料号</view>
					<input placeholder="" :disabled="true" v-model="part_id" name="input" @confirm="onConfirmMaterial" />
				</view>
				<view class="cu-form-group">
					<view class="title">品名</view>
					<input placeholder="" :disabled="true" v-model="part_name" name="input" @confirm="onConfirmMaterial" />
				</view>

				<!-- <view class="cu-form-group margin-top">
					<view class="title">输入</view>
					<input placeholder="请输入条码" v-model="todoNum" name="input" @confirm="onConfirmTodo" />
				</view> -->
				<todo-input v-model="todoNum" @confirm="onConfirmTodo" :focus="todoFocus" @focusChange="onTodoFocusChange"></todo-input>

			</view>

			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange"></text>
					列表
				</view>
			</view>
			<todo-list-view :top="660" class="cu-list menu">
				<view v-for="(item, idx) in todoList" class="cu-item">
					<view class="content padding-tb-sm">
						<view>
							<text class="cuIcon-formfill text-blue margin-right-xs"></text>
							<text>料号:</text>
							{{ item.part_id }}
						</view>
						<view class="text-gray text-sm">
							<text class="lg text-gray cuIcon-settingsfill"></text>
							<text>来源:</text>
							{{ item.source_bill }}
						</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">
							<text class="text-gray">已理:</text>
							{{ item.act_qty }}
						</view>
						<view class="text-gray  text-xs">
							<text class="text-gray">应理:</text>
							{{ item.plan_qty }}
						</view>
					</view>
				</view>
			</todo-list-view>

			<!-- <view class="cu-bar tabbar bg-white shadow foot">
				<view class="bg-orange submit" @tap="onFinish">入库完成</view>
				<view class="bg-white submit" @tap="onOpenCancelModal()">取消入库</view>
				<view class="bg-white submit">切换单号</view>
			</view> -->
			<view class="cu-bar tabbar bg-white shadow foot foot-btn-group">
				<button class="cu-btn bg-white" @tap="onOpenCancelModal">取消入库</button>
				<button :disabled="!bill" class="cu-btn bg-white" @tap="onFinish">入库完成</button>
				<button class="cu-btn bg-white" @tap="clearForm">切换储位</button>
			</view>
			<bill-prompt ref="refCancelPrompt" @confirm="onCancelConfirm" title="取消入库"></bill-prompt>
		</view>
	</view>
</template>

<script>
	import api from '@/serveices/wms-api.js';
	import billInput from './bill-input.vue';
	import billPrompt from './bill-prompt.vue'
	import todoInput from './todo-input.vue';
	import util from '@/serveices/util.js';
	import todoListView from './todo-list-view.vue';
	export default {
		components: {
			billInput,
			todoInput,
			todoListView,
			billPrompt
		},
		data() {
			return {
				bill: '',
				part_id: '',
				part_name: '',
				todoList: [],
				todoNum: '',
				todoFocus: true,
				storeNum: ''
			};
		},
		methods: {
			onTodoFocusChange(focus) {
				this.todoFocus = focus
			},
			// 取消入库
			onOpenCancelModal() {
				this.$refs.refCancelPrompt.show();
			},
			onCancelConfirm(scanInfo) {
				api.moinstore({
					opType: 'CANCEL',
					billNo: '',
					binId: '',
					palletNo: scanInfo
				}).then(res => {
					this.$refs.refCancelPrompt.hide();
					util.playSuccess()
					if (this.bill) {
						api.getmoinstoredetail(this.bill).then(res2 => {
							this.todoList = res2.data;
							if (res2.data.length) {
								const item = res2.data[0];
								this.bill = item.bill_id;
								this.part_name = item.part_name;
								this.part_id = item.part_id;
							}
						})
					} else {
						uni.showToast({
							title: "取消成功"
						})
					}

				}).catch(err => {
					util.playFailed()
				}).finally(() => {
					this.todoNum = ''
					this.todoFocus = true;
				})
			},
			onConfirmTodo() {
				if (!this.storeNum) {
					// 储位为空 扫描内容作为储位处理
					api.checkbin(this.todoNum).then(r => {
						this.storeNum = r.data.bin_id;
						util.playSuccess()
					}).catch(err => {
						util.playFailed()
					}).finally(() => {
						this.todoNum = ''
					})
				} else {
					api.moinstore({
						opType: 'INSTORE',
						billNo: this.bill,
						binId: this.storeNum,
						palletNo: this.todoNum
					}).then(res => {
						this.todoList = res.data;
						if (res.data.length) {
							const item = res.data[0];
							this.bill = item.bill_id;
							this.part_name = item.part_name;
							this.part_id = item.part_id;
						}
						util.playSuccess()
					}).catch(err => {
						util.playFailed()
					}).finally(() => {
						this.todoNum = ''
					})
				}
			},
			//完成入库
			onFinish() {
				uni.showModal({
					title: '系统提示',
					content: '是否确认入库完成？',
					success: res => {
						api.moinstore({
							opType: 'CLOSED',
							billNo: this.bill,
							binId: '',
							palletNo: ''
						}).then(res => {
							this.clearForm();
						});
					}
				});
			},

			clearForm() {
				this.bill = ''
				this.part_id = ''
				this.part_name = ''
				this.todoList = []
				this.todoNum = ''
				this.storeNum = ''
				this.todoFocus = true;
			}
		},
		beforeMount() {}
	};
</script>

<style>
	.fixed {
		position: fixed;
	}
</style>
